<template>
  <div>
    <my-header :showBack="true"  :title="$t('lang.TradingParticulars')" ></my-header>
    <div style="background:#f5f5f5;">
          <div> 
            <ul class="my_trading_info">
              <li>{{$t("lang.tradtype")}}：<i style="color:#f44">
                <span v-if = "tradingInfo.tradeStatus == 2">
                  {{$t("lang.unpaid")}}
                </span>
                <span v-if = "tradingInfo.tradeStatus == 1">
                  {{$t("lang.Fortrading")}}
                </span>
                <span v-if = "tradingInfo.tradeStatus == 3">
                  {{$t("lang.confirmeding")}}
                </span>
                <span v-if = "tradingInfo.tradeStatus == 4">
                  {{$t("lang.cacancelleding")}}
                </span>
                  </i>
                </li>
              <li>{{$t("lang.transanum")}}：{{tradingInfo.tradeAmount}}</li>
              <li>{{$t("lang.TotalAllss")}}：{{(tradingInfo.tradeAmount*tradingInfo.tradePrice).toFixed(3)}} </li>
              <li>{{$t("lang.TotalRmb")}}：{{(tradingInfo.tradeAmount*tradingInfo.tradePrice*7).toFixed(3)}} </li>
            </ul>
            <!-- 如果自己是买家就显示自己的信息 或者 交易审核完成状态 买卖双方都显示 -->
            <div v-if="tradingInfo.flagSale == 1||tradingInfo.tradeStatus !== 5"> 
              <!-- 买家信息 -->
              <div class="trading_title">{{$t("lang.Buyersinformation")}}</div>
              <ul class="my_trading_info">
                <li>{{$t("lang.RealName")}}：{{tradingInfo.buyCustomerName}}</li>
                <li>{{$t("lang.Phonenumber")}}：{{tradingInfo.buyCustomerPhone}}</li>
                <li>{{$t("lang.Alipay")}}：{{tradingInfo.buyAliPay}}</li>
                <li>{{$t("lang.kaiHBank")}}：{{tradingInfo.buyBankName}}</li>
                <li>{{$t("lang.cardnumber")}}：{{tradingInfo.buyBankCard}}</li>
              </ul>
            </div>
            <!-- 如果自己是卖家就显示自己的信息 或者 交易审核完成状态 买卖双方都显示 -->
            <div v-if="tradingInfo.flagSale ==0||tradingInfo.tradeStatus !== 5"> 
              <!--卖家信息  -->
              <div class="trading_title">{{$t("lang.sellerinfo")}}</div>
              <ul class="my_trading_info">
                <li>{{$t("lang.RealName")}}：{{tradingInfo.saleCustomerName}}</li>
                <li>{{$t("lang.Phonenumber")}}：{{tradingInfo.saleCustomerPhone}}</li>
                <li>{{$t("lang.Alipay")}}：{{tradingInfo.saleAliPay}}</li>
                <li>{{$t("lang.kaiHBank")}}：{{tradingInfo.saleBankName}}</li>
                <li>{{$t("lang.cardnumber")}}：{{tradingInfo.saleBankCard}}</li>
              </ul>
            </div>
             <div class="danger-font">
               {{$t("lang.Remind")}}
            </div>
            
            <div v-if="tradingInfo.tradeImg&&tradingInfo.tradeImg.length>0"> 
              <!-- 付款凭证 -->
              <div class="trading_title">{{$t("lang.evidenceMent")}}</div>
              <ul class="my_trading_info trading_img_box" >
                <li @click="showTradingImg(tradingInfo.tradeImg)">
                  <img :src="tradingInfo.tradeImg" alt="">
                </li>
                <!-- <li @click="showTradingImg(tradingInfo.tradeImg,1)">
                  <img :src="tradingInfo.tradeImg" alt="">
                </li> -->
              </ul>
            </div>

            <div class="trading_btn">
              <!-- 如果未审核 买卖家都显示取消交易 -->
              <!-- <van-button type="danger" size="large" v-if="tradingInfo.applyStatus==1" @click="cencelTrade">取消交易</van-button> -->
              <!-- 如果审核通过 买家显示上传凭证 -->
              <van-button type="primary" size="large" v-if="tradingInfo.tradeStatus==2&&tradingInfo.flagSale==0" @click="showUploadPopup">{{$t("lang.Uploaddocuments")}}</van-button>
              <!-- 如果审核通过 卖家显示确认收款 -->
              <van-button type="primary" size="large" v-if="tradingInfo.tradeStatus==3&&tradingInfo.flagSale==1" @click="confirmMyTrade">{{$t("lang.receiptMoney")}}</van-button>

              <!-- <van-button type="danger" size="large">投诉</van-button> -->
            </div>
            

            <van-popup v-model="uploadPopup" position="bottom" class="upload_popup" @click-overlay="goBack">
              <div class="upload_popup_box">
                <!-- <label for="" @click="showBigImg(1)" >
                  <img src="../../assets/img/home/paymentScreenshot1.jpg" alt="" srcset="">
                </label> -->
                <!-- <label for="" @click="showBigImg(2)">
                  <img src="../../assets/img/home/paymentScreenshot2.jpg" alt="" srcset="">
                </label> -->
                <label for="uploadImg1">
                  <img src="" alt="" srcset="" ref="img1">
                  <i style="font-size:50px;" class="iconfont icon-upload-img"></i>
                  <input type="file" @change="addImg(1)" accept="image/jpeg,image/jpg,image/png" ref="fileInfo1" id="uploadImg1" />
                </label>
                <!-- <label for="uploadImg2">
                  <img src="" alt="" srcset="" ref="img2">
                  <i style="font-size:50px;" class="iconfont icon-upload-img"></i>
                  <input type="file" @change="addImg(2)" accept="image/jpeg,image/jpg,image/png" ref="fileInfo2" id="uploadImg2"/>
                </label> -->
              </div>
              <div class="footer_btn">
                <van-button type="primary" size="large" @click="confirmUpload">{{$t("lang.uploading")}}</van-button>
              </div>
            </van-popup>
          </div>
          
          <!-- <div class="no_data" v-else>
						<img src="../../assets/img/my/nodata.png" alt="" srcset="">
            {{$t("lang.NoData")}}
          </div> -->
         
    </div>
    
  </div>
</template>

<script>
import header from "@/components/header";
import timeFormat from "../../store/timeFormat";
import $ from "jquery";
import { Indicator,MessageBox } from "mint-ui";
import { Toast,ImagePreview  } from "vant";
export default {
  name:"TradingDetail",
  components: {
    "my-header": header
  },
  data() {
    return {
      active:0,

      realName:'',
      params: {
        targetPhone: "",
        moneyNum: "",
        payPass: ""
      },
      disabledBtn: false,

      tradingInfo:{},
      uploadPopup:false,

      completeTrade:[],
      loading:false,
      finished:true,
      searchData:{
        pageNo:1,
        pageSize:30,
      }
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy.MM.dd hh:mm:ss");
    }
  },
  watch:{
    '$route'(val, oldval) {
      if (oldval.fullPath.indexOf('?') != -1) {
        MessageBox.close(false);
      }
    },
    'params.targetPhone'(val){
      if (this.$validator.isPhone(val)) {
        this.$ajax(this.$api.selectCustomerByPhone, {id:val}).then(res => {
        if (res.code == 0) {
          if(res.data){
            if(res.data.realName){
              this.realName = res.data.realName;
            }else if(res.data.realName ==""){
              Toast({ message: "对方账号信息不完善", position: "bottom" });
              this.params.targetPhone = '';
              this.realName = '';
            }else if(!res.data.realName){
              Toast({ message: "对方账号不存在", position: "bottom" });
              this.params.targetPhone = '';
              this.realName = '';
            }
          }else{
            this.params.targetPhone = '';
            this.realName = '';
          }
        }else{
          this.params.targetPhone = '';
          this.realName = '';
        }
      });
      }
    },
    active(val,oldval){
      if(val==1){
        this.selectConvertTrading();
      }
    }
  },
  created(){
    if(this.$route.fullPath.indexOf('?')!=-1){
      this.goBack();
    }
    console.log(this.$route.params.id,666666666666666)
  },
  mounted() {
    this.selectMyTrading();
  },
  methods:{
    //查询交易中数据
    selectMyTrading(){
      this.$ajax(this.$api.selectTradingRecord,{type:2}).then(
      res => {
        if (res.code == 0) {
          if(res.msg){
            this.tradingInfo = res.msg[this.$route.params.id];
            console.log(this.tradingInfo,111111111)
          }else{
            this.tradingInfo = {}
          }
        }
      });
    },
    //取消交易
    cencelTrade(){
      //处理物理键返回关闭messageBox
      if(window.location.href.indexOf('?MessageBox')==-1){
        window.location.href = window.location.href+'?MessageBox';
      }
      MessageBox({message:'确认取消交易？',closeOnClickModal:false,showCancelButton:true}).then(action => {
        if(action=='confirm'){
          this.$ajax(this.$api.cancleMyTradeById,{id:this.tradingInfo.id}).then(
          res => {
            if (res.code == 0) {
              Toast({ message: "取消成功", position: "bottom" });
              this.selectMyTrading();
              this.getIndexData();
            }
          });
          this.goBack();
        }else{
          this.goBack();
        }
      }).catch(() => {});
    },

    //打开上传图片popup
    showUploadPopup(){
      //处理物理键返回关闭popup
      if (window.location.href.indexOf("?uploadPopup") == -1) {
        window.location.href = window.location.href + "?uploadPopup";
      }
      this.uploadPopup = true;
    },
    //建立一個可存取到該file的url
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    //添加图片
    addImg(id) {
      if (id == 1) {
        var fileInfo1 = this.$refs.fileInfo1.files[0];
        if(fileInfo1){
          let objUrl = this.getObjectURL(fileInfo1);
          // this.imgArr[0] = objUrl;
          this.files1=fileInfo1;
          this.$refs.img1.src = objUrl;
        }
      } else if (id == 2) {
        var fileInfo2 = this.$refs.fileInfo2.files[0];
        if(fileInfo2){
          let objUrl = this.getObjectURL(fileInfo2);
          // this.imgArr[1] = objUrl;
          this.files2=fileInfo2;
          this.$refs.img2.src = objUrl;
        }
      }
    },
    //交易中预览图片
    showBigImg(num){
      if(num==1){
        ImagePreview([require('../../assets/img/home/paymentScreenshot1.jpg')]);
      }else{
        ImagePreview([require('../../assets/img/home/paymentScreenshot2.jpg')]);
      }
    },
    //已完成预览图片
    showTradingImg(){
      // ImagePreview(tradingInfo.tradeImg);
    },
    //确认上传
    confirmUpload(){
      // if(!this.files1||!this.files2){
      //   Toast({ message: '请一次上传两张图片', position: "bottom" });
      //   return;
      // }
      if(!this.files1){
        Toast({ message: '请上传图片', position: "bottom" });
        return;
      }
      const vm = this;
      var formData = new FormData();
      formData.append('img',this.files1);
      // formData.append('img',this.files2);
      formData.append('id',this.tradingInfo.id)
      formData.append('token',localStorage.getItem('token'))
      Indicator.open({
        spinnerType: "fading-circle"  
      });
      $.ajax({
        url: vm.$api.baseURL + vm.$api.pushTradeImg.url,
        type: "post",
        data: formData,
        //十分重要，不能省略
        cache: false,
        processData: false,
        contentType: false,
        success: function(res) {
          if (res.code == 0) {
            Toast({ message:'上传成功', position: "bottom" });
            vm.selectMyTrading();
            vm.uploadPopup = false;
          } else if (res.code == 1) {
            Toast({ message: res.msg, position: "bottom" });
          } else if (res.code == 2) {
            Toast({ message: res.msg, position: "bottom" });
            // vm.$router.push({
            //   path: "/login"
            // });
          }
          Indicator.close();
          vm.goBack();
        },
        error: function(e) {
          Indicator.close();
        }
      });
    },

    //确认收款
    confirmMyTrade(){
      this.$ajax(this.$api.confirmTrade,{id:this.tradingInfo.id}).then(
      res => {
        if (res.code == 0) {
          Toast({ message: this.$t('lang.CZsuccessful'), position: "bottom" });
          this.selectMyTrading();
          // this.getIndexData();
          this.$router.push("/tradIndex");        
        }else{
          Toast({ message: res.msg, position: "bottom" });
        }
      });
    },

    //初始获取已完成列表
    getCompleteTrade(){
      this.searchData.pageNo = 1;
      this.$ajax(this.$api.selectMyTradeListConvert, this.searchData).then(res => {
        if (res.code == 0) {
          if (res.data && res.data.list.length > 0) {
              this.loading = false;
              res.data.list.forEach(function(item){
                item.isShowDetails = false;
              });
              this.completeTrade = res.data.list;
              this.finished = this.searchData.pageNo == res.data.pageCount;
          } else {
            this.completeTrade = [];
          }
        }
      });
    },
    loadMore(){
      this.searchData.pageNo += 1;
      this.$ajax(this.$api.selectMyTradeListConvert, this.searchData).then(res => {
        if (res.code == 0) {
          if (res.data && res.data.list) {
            res.data.list.forEach(function(item){
              item.isShowDetails = false;
            });
            this.loading = false;
            this.completeTrade = this.completeTrade.concat(res.data.list);
            this.finished = this.searchData.pageNo == res.data.pageCount;
          }
        }
      });
    },
    //展示已完成详情
    showTradeDetails(data,key){
      this.$nextTick(function () {
        this.completeTrade.forEach(function(item,index){
          if(key == index){
            item.isShowDetails = !item.isShowDetails;
          }else{
            item.isShowDetails = false;
          }
        });
      })
    },

    
  }
};
</script>

<style scoped>
.real_name{
  flex: 1;
  text-align: center;
  max-width: 80px;
  background: #ffffff;
  color: #666;
}
.transfer_accounts {
  margin-top: -1px;
  background: #fff;
  font-size: 14px;
  padding-bottom: 0px;
}
.transfer_accounts_tip {
  font-size: 12px;
  color: #999999;
  margin: 5px 15px;
}
.confirm_trade {
  width: 80%;
  margin-top: 30px;
  margin-left: 10%;
  line-height: 44px;
  font-size: 16px;
  background: #26a2ff;
  border: none;
  border-radius: 5px;
  color: #fff;
}
.trade_record {
  margin-top: 30px;
  margin-bottom: 10px;
}
.trade_record div {
  line-height: 32px;
}
.danger-font {
  color: red;
  padding: 10px 2%;
}
.trade_record table {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  text-align: center;
  border-collapse: collapse;
  padding: 2px;
  border: 1px solid #eee;
  color: #333;
}
.trade_record tr {
  border: 1px solid #eee;
}
.trade_record th {
  border: 1px solid #eee;
  padding: 5px;
  color: #666;
}
.trade_record td {
  border: 1px solid #eee;
  padding: 5px 0;
}
.my_trade_info{
  padding: 10px 2%;
  line-height: 36px;
  background: #fff;
  color: #666;
}
.my_trading_info{
  padding: 10px 2%;
  line-height: 36px;
  background: #fff;
  color: #666;
  /* border-bottom: 1px #eee solid; */
}
.trading_img_box{
  display: flex;
  justify-content: space-between;
}
.trading_img_box li{
  width: 48%;
  margin: 0 1%;
  flex: 1;
}
.trading_title{
  padding: 10px 2%;
  /* border-top: 1px #eee solid; */
  border-bottom: 1px #eee solid;
  background: #fff;
  margin-top: 10px;
}

.trading_btn{
  margin:20px 2%;
}
.trading_btn button{
  margin-top: 10px;
}
.upload_popup{
  width: 100%;
  padding: 20px 0;
}
.upload_popup_box{
  display: flex;
  margin-bottom: 65px;
}
.upload_popup_box label{
  flex: 1;
  width: 22.5%;
  margin-left: 2%;
  padding: 2px;
  border: 1px #ccc solid;
  border-radius: 2px;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  height: 150px;
  line-height: 140px;
}
.upload_popup_box label:last-child{
  margin-right: 2%;
}
.upload_popup_box img{
  width: auto;
  max-width: 100%;
  max-height: 100%;
  
}
.upload_popup_box input{
  display: none;
}
.complete_trade {
  background: #fff;
 
}
.complete_trade label{
  line-height: 44px;
  display: flex;
  margin: 0 2%;
  border-bottom: 1px #eee solid;
}
.complete_trade label>span{
  flex: 1;
  padding: 0 5px;
}
.complete_name{
  text-align: right;
}
.complete_title{
  padding: 10px 2%;
  border-bottom: 1px #eee solid;
  background: #fff;
}
.complete_trade .my_trading_info{
  border-bottom: 1px #eee solid;
}
</style>
